<template>
  <div class="index">
    <router-view></router-view>
    <tab-bar :tabbarArray="tabbarArray"></tab-bar>
  </div>
</template>

<script>
import TabBar from "../components/TabBar.vue";
export default {
  name: "index",
  data() {
    return {
      tabbarArray: [
        {
          icon: "icon-shangpinfenlei",
          name: "首页",
          path: "/home",
        },
        {
          icon: "icon-shipu",
          name: "食谱",
          path: "/shipu",
        },
        {
          icon: "icon-gouwuche",
          name: "订单",
          path: "/gouwuche",
        },
        {
          icon: "icon-wode",
          name: "我的",
          path: "/Me",
        },
      ],
    };
  },
  components: {
    TabBar,
  },
};
</script>
<style lang="scss" scoped>
.index{
    width: 100%;
    // 注意calc里面+ -号左右要加空格
    height: calc(100% - #{55px});//超出界面
    overflow: auto;//自动
}
</style>
